<template>
  <iframe 
    :src="iframeSrc"
    :style="iframeStyle"
    ref="iframeRef"
  >
  </iframe>
</template>

<script setup>
import { ref, computed } from 'vue'
import { HtmlModulesPath } from '@/utils/constants'

const defaultIframeStyle = () => {return {border: '1px solid var(--el-border-color)', width: '100%'}}

// 属性
const iframeSrc = ref(null)
const iframeStyle = ref(defaultIframeStyle())
const iframeRef = ref(null)

// 配置函数
const setConfig = (entryName, bridgeId, webStyleHeight) => {
  if (entryName == '') return null

  const indexUrl = `${HtmlModulesPath}/index.html`
  iframeSrc.value = `${indexUrl}?entryName=${entryName}&bridgeId=${bridgeId}`

  const style = defaultIframeStyle()
  if (webStyleHeight) style.height = `${webStyleHeight}px`
  iframeStyle.value = style

  return iframeRef.value?.contentWindow
}

const reset = () => {
  iframeSrc.value = null
  iframeStyle.value = defaultIframeStyle()
}

// 暴露给父组件的方法
defineExpose({
  setConfig,
  reset
})
</script>